<template>
  <div class="authorization">
    <div class="mianbox flex row_bet col_top">
      <div class="card left1">
        <div class="title">已绑定页面</div>
        <div style="margin-top: 16px;">
          <div>
            <div v-for="v in apibingpagelist" :key="v.id">
              <div v-if="v.parent_name!==''">
                <div class="flex row_bet col_center">
                  <span>{{ v.parent_name }}</span>
                  <span>
                    <a-icon type="close" style="font-size:12px;color: red"/>
                  </span>
                </div>
                <div class="flex row_bet col_center" style="margin-left: 20px;font-size: 12px;">
                  <span>{{ v.rt_name }}</span>
                  <span>
                    <a-icon type="close" style="font-size:12px;color: red"/>
                  </span>
                </div>
              </div>
              <div v-else>
                <div class="flex row_bet col_center">
                  <span>{{ v.rt_name }}</span>
                  <span>
                    <a-icon type="close" style="font-size:12px;color: red"/>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card left2">
        <div class="title" style="margin-bottom: 14px; padding: 11px 11px 0 18px;">接口列表</div>
        <div style="text-align: center">
          <a-input placeholder="输入关键字进行搜索" style="width:296px;" class="br4"/>
        </div>
        <div class="apiul">
          <div v-for="(v,k) in apilist" :key="k">
            <div class="apili flex row_bet col_center" @click="getbingapipage(v)">
              <div>
                <div class="apiname">#{{ v.name }}</div>
                <div class="apisite">{{ v.api }}</div>
              </div>
              <a-icon type="right" style="font-size:18px;color: #BBBBBB;"/>
            </div>
            <a-divider style="margin:0"/>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="">
          <div>
            <div style="margin-bottom: 16px;">当前选中接口：</div>
            <div style="margin-bottom: 20px;">
              <div style="font-size: 12px;">#{{ apiform.name }}</div>
              <div style="font-size: 14px;">{{ apiform.api }}</div>
            </div>
            <div style="margin-bottom: 16px;">当前选中页面：</div>
            <div>
              <div class="pageli">
                <div class="flex row_bet col_center" style="font-size: 14px;">
                  <div><span class="p_r_10">{{ pageform.rt_name }}</span> <span>{{ pageform.rt_code }}</span></div>
                </div>
                <div v-for="(c,s) in pageform.menu" :key="s">
                  <div class="flex row_bet col_center" style="font-size: 12px;margin-left: 28px">
                    <div><span class="p_r_10">{{ pageform.rt_name }}</span> <span>{{ pageform.rt_code }}</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div style="margin-top: 64px;">
              <a-button type="primary" style="width: 166px;height: 37px;" @click="dobingapipage">确认绑定</a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="card right1">
        <div class="title" style="margin-bottom: 11px;">页面列表</div>
        <div class="flex row_bet col_center">
          <a-input placeholder="输入关键字进行搜索" style="width:260px;" class="br4"/>
          <a-icon type="plus-circle" style="font-size: 24px;"/>
        </div>
        <div>
          <div class="pageul">
            <div v-for="v in pagelist" :key="v.rt_id">
              <div class="pageli">
                <div class="flex row_bet col_center" style="font-size: 14px;margin-bottom: 5px;">
                  <div class="cursor" @click="getfindbingapi(v)"><span class="p_r_10">{{ v.rt_name }}</span>
                    <span>{{ v.rt_code }}</span></div>
                  <span><a-icon type="close" style="font-size:12px;color: red"/></span>
                </div>
                <div v-for="(c,s) in v.menu" :key="s">
                  <div class="flex row_bet col_center" style="font-size: 12px;margin-left: 28px">
                    <div class="cursor" @click="getfindbingapi(c)"><span class="p_r_10">{{ c.rt_name }}</span>
                      <span>{{ c.rt_code }}</span></div>
                    <span><a-icon type="close" style="font-size:12px;color: red"/></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card right2">
        <div class="title">已绑定接口</div>
        <div style="margin-top: 21px;">
          <div>
            <div v-for="v in pagebingapilist" :key="v.api">
              <div class="pagebapili flex row_bet col_center">
                <div>
                  <div style="font-size: 12px;">#{{ v.name }}</div>
                  <div style="font-size: 14px;">{{ v.api }}</div>
                </div>
                <a-icon type="close" style="font-size:12px;color: red"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { dobingapipage, gepagelist, getapilist, getbingapipage, getfindbingapi } from '@/api/permissionApi'

  export default {
    name: 'Authorization',
    data () {
      return {
        api: '',
        key: '',
        apilist: [
          // {
          //   name: '影响力排行', // 名称
          //   api: 'api/get_influence_data' // api
          // }
        ],
        pagelist: [
          // {
          //   rt_id: 2,
          //   rt_name: '活动管理',
          //   rt_code: 'actManagm',
          //   rt_parent_id: null,
          //   menu: [
          //     {
          //       rt_id: 6,
          //       rt_name: '公用活动',
          //       rt_code: 'publicAct',
          //       rt_parent_id: 2
          //     }
          //   ]
          // }
        ],
        apibingpagelist: [
          // {
          //   rt_name: '控制台', // 页面名称，
          //   rt_code: 'userDashboard', // 页面唯一键，
          //   rt_parent_id: null, // 父id，
          //   id: 1, // 绑定表id
          //   parent_name: ''// 父名称
          // }
        ],
        pagebingapilist: [
          // {
          //   api: 'admin/get_lib_data', // 接口地址
          //   name: '控制台' // 接口注释
          // }
        ],
        apiform: {
          // api: 'admin/get_lib_data', // 接口地址
          // name: '控制台' // 接口注释
        },
        pageform: {
          // rt_id: 2,
          // rt_name: '活动管理',
          // rt_code: 'actManagm',
          // rt_parent_id: null,
          // menu: [
          //   {
          //     rt_id: 6,
          //     rt_name: '公用活动',
          //     rt_code: 'publicAct',
          //     rt_parent_id: 2
          //   }
          // ]
        }
      }
    },
    computed: {},
    created () {
      this.getapilist()
      this.gepagelist()
    },
    mounted () {

    },
    methods: {
      dobingapipage () {
        dobingapipage({
          code: this.pageform.rt_code,
          api: this.apiform.api
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('绑定成功!')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getfindbingapi (val) {
        this.pageform = val
        getfindbingapi({
          key: val.rt_code
        }).then(res => {
          // console.log(res)
          this.pagebingapilist = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      getbingapipage (val) {
        this.apiform = val
        getbingapipage({
          api: val.api
        }).then(res => {
          // console.log('000', res)
          this.apibingpagelist = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      getapilist () {
        getapilist().then(res => {
          // console.log(res)
          this.apilist = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      gepagelist () {
        gepagelist().then(res => {
          // console.log(res)
          this.pagelist = res.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .authorization {
    /deep/ .ant-btn {
      border-radius: 4px;
    }

    .mianbox {
      min-height: 100vh;

      .left1 {
        width: 199px;
        min-height: 100vh;
        padding: 11px 15px 0 11px;
      }

      .left2 {
        width: 333px;
        min-height: 100vh;

        .apiul {
          height: calc(100vh - 80px);
          overflow-y: auto;
        }

        .apili {
          height: 74px;
          padding: 0 20px;
          cursor: pointer;

          .apiname {
            color: #292929;
          }

          .apisite {
            color: #101010;
          }
        }

        .apili:hover {
          background-color: #faf9f9;
        }
      }

      .center {
        width: 253px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .right1 {
        width: 333px;
        min-height: 100vh;
        padding: 11px 18px 0 18px;

        .pageul {
          margin-top: 25px;
          height: calc(100vh - 100px);
          overflow-y: auto;
          padding-right: 10px;

          .pageli {
            margin-bottom: 10px;
          }
        }
      }

      .right2 {
        width: 292px;
        min-height: 100vh;
        padding: 11px 16px 0 16px;

      }

      .title {

      }
    }
  }
</style>
